<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>熔断器测试</title>
    <style>
        body { font-family: 'Microsoft YaHei', Arial, sans-serif; margin: 40px; }
        h1 { color: #222; }
        .result { margin-top: 20px; padding: 20px; background: #f8f8f8; border-radius: 8px; border: 1px solid #eee; }
        .error { color: red; }
        .success { color: green; }
        label { margin-right: 10px; }
        input[type="checkbox"] { margin-left: 10px; }
    </style>
</head>
<body>
    <h1>熔断器测试</h1>
    <div>
        <label>是否模拟失败（触发熔断/降级）：</label>
        <input type="checkbox" id="failCheckbox">
        <button onclick="testCircuitBreaker()">发起熔断测试请求</button>
    </div>
    <div class="result" id="result"></div>
    <script>
        function testCircuitBreaker() {
            const fail = document.getElementById('failCheckbox').checked;
            const url = `/api/circuit-breaker/remote?fail=${fail}`;
            document.getElementById('result').innerHTML = '请求中...';
            fetch(url)
                .then(res => res.json())
                .then(data => {
                    let html = `<b>状态码：</b> <span class='${data.code === 200 ? 'success' : 'error'}'>${data.code}</span><br>`;
                    html += `<b>消息：</b> ${data.message}<br>`;
                    html += `<b>数据：</b> ${data.data || ''}`;
                    document.getElementById('result').innerHTML = html;
                })
                .catch(err => {
                    document.getElementById('result').innerHTML = `<span class='error'>请求异常：${err}</span>`;
                });
        }
    </script>
</body>
</html> 